<template>
    <div>
        <el-form ref="form" label-width="80px" label-position="left" size="small">
            <div class="name_bold">数据设置</div>
            <el-form-item class="marginTop16" label-width="0px">
                <l-select :options="textTypeOption" style="width: 100%;" v-model="config.contentType" />
            </el-form-item>
            <div class="name_bold">文本内容</div>
            <el-form-item class="marginTop16" label-width="0px">
                <el-input type="textarea" :rows="4" placeholder="请输入" v-model="config.content" />
            </el-form-item>
            <el-divider />
            <div class="name_bold">大小位置</div>
            <el-form-item label-width="0px">
                <el-col :span="12">
                    <el-form-item label="W" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.width" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="X" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.left" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="H" class="marginTop16" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.height" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="Y" class="marginTop16" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.top" />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-divider />
            <div class="name_bold">文本设置</div>
            <el-form-item class="marginTop16" label-width="0px">
                <l-select :options="fontFamilyOption" style="width: 100%;" v-model="config.fontFamily" />
            </el-form-item>
            <el-form-item class="marginTop16" label-width="0px">
                <el-col :span="24">
                    <el-col :span="5">
                        <el-form-item label-width="0px">
                            <el-input style="width: 70px;" v-model="config.fontSize" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="0px" style="margin-left: 30px;">
                            <l-select :options="fontWeightOption" style="width: 180px;" v-model="config.fontWeight" />
                        </el-form-item>
                    </el-col>
                </el-col>
            </el-form-item>

            <el-form-item label-width="0px">
                <l-select :options="writingModeOption" style="width: 100%;" v-model="config.writingMode" />
            </el-form-item>

            <div style="display: flex;justify-content: space-between;width: 200px;font-weight: bolder;">
                <i class="learun-icon-blod" :style="{
                    'font-size': '12px',
                    'margin-left': '12px',
                    'color': config.fontWeight == 'bolder' ? '#5E95FF' : ''
                }" @click="fontWeightFun"></i>

                <i class="learun-icon-italic" :style="{
                    'font-size': '12px',
                    'color': config.fontStyle == 'oblique' ? '#5E95FF' : ''
                }" @click="fontStyleFun"></i>
                <i class="learun-icon-underline" :style="{
                    'font-size': '12px',
                    'color': config.textDecoration == 'underline' ? '#5E95FF' : ''
                }" @click="textDecorationFun"></i>
                <i class="learun-icon-text-multi" style="font-size:12px"></i>
                <i class="learun-icon-grade" style="font-size:12px"></i>
            </div>
            <div class="name_bold marginTop16">颜色设置</div>
            <el-form-item label="透明度" class="marginTop16">
                <el-slider style="width: 120px;" v-model="config.opacity"/>
            </el-form-item>
            <el-form-item class="marginTop16" label-width="0px">
                <div style="display: flex;">
                    <l-checkbox :options="[{ label: '文本颜色', value: '1' }]" v-model="config.choseTextColor" />
                    <l-input-color :notInput="true" v-model="config.textColor" style="margin-left: 10px;" />
                </div>
            </el-form-item>
            <el-form-item class="marginTop16" label-width="0px">
                <div style="display: flex;">
                    <l-checkbox :options="[{ label: '背景颜色', value: '1' }]" v-model="config.choseBackground" />
                    <l-input-color :notInput="true" v-model="config.background" style="margin-left: 10px;" />
                </div>
            </el-form-item>
            <el-form-item class="marginTop16" label-width="0px">
                <div style="display: flex;">
                    <l-checkbox :options="[{ label: '描边颜色', value: '1' }]" v-model="config.textShadow"/>
                    <l-input-color :notInput="true" style="margin-left: 10px;" v-model="config.textShadowColor"/>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { printMixin } from './index'
export default ({
    props: ['listIndex', 'centerList'],
    data() {
        return {
            config: this.centerList
        }
    },
    mixins: [printMixin],
    methods: {
        fontWeightFun() {
            if (this.config.fontWeight == 'bolder') {
                this.config.fontWeight = 'normal'
            } else {
                this.config.fontWeight = 'bolder'
            }
        },
        fontStyleFun() {
            if (this.config.fontStyle == 'oblique') {
                this.config.fontStyle = ''
            } else {
                this.config.fontStyle = 'oblique'
            }
        },
        textDecorationFun(){
            if (this.config.textDecoration == 'underline') {
                this.config.textDecoration = 'none'
            } else {
                this.config.textDecoration = 'underline'
            }
        }
    }
})
</script>

<style lang="scss"></style>